<template>
	<div class="base_info_container">
		<template v-if="userInfo.account !== 'dever'">
			<el-tabs type="border-card" class="custom_top" v-model="activeName">
				<el-tab-pane label="基本信息" name="1"></el-tab-pane>
				<el-tab-pane label="默认图管理" name="2"></el-tab-pane>
				<el-tab-pane label="系统配置" name="3"></el-tab-pane>
				<el-tab-pane label="栏目配置" name="4"></el-tab-pane>
				<el-tab-pane label="数据配置" name="5"></el-tab-pane>
			</el-tabs>
			<component :is="componentName"></component>
		</template>
		<site-config-list v-else></site-config-list>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import siteBaseInfo from './site/index';
import siteDataConfig from './data/index';
import siteConfigList from './config/index';
import siteColumnConfig from './column/index';
import siteSystemConfig from './system/index';
import siteDefaultImage from './default/index';
export default {
	components: { siteBaseInfo, siteColumnConfig, siteDataConfig, siteSystemConfig, siteDefaultImage, siteConfigList },
	data() {
		return {
			activeName: '1',
			componentName: ''
		};
	},
	computed: {
		...mapGetters(['userInfo'])
	},
	watch: {
		activeName: {
			handler(val) {
				if (val === '1') {
					this.componentName = 'siteBaseInfo';
				} else if (val === '2') {
					this.componentName = 'siteDefaultImage';
				} else if (val === '3') {
					this.componentName = 'siteSystemConfig';
				} else if (val === '4') {
					this.componentName = 'siteColumnConfig';
				} else if (val === '5') {
					this.componentName = 'siteDataConfig';
				}
			},
			immediate: true
		}
	},
	methods: {}
};
</script>

<style lang="scss" scoped>
.base_info_container::v-deep {
	display: flex;
	flex-direction: column;
	height: 100%;
	.el-tabs {
		border: none;
		flex-shrink: 0;
		box-shadow: none;
	}
	.el-tabs__content {
		display: none;
	}
}
</style>
